<div class="modal fade" id="modal-hotkeys" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title">Keyboard Shortcuts</h3>
            </div>
            <div class="modal-body">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <h4>Navigation</h4>
                    <table id="hotkeys-navigation-table">
                        <tr>
                            <td><kbd>g</kbd> then <kbd>h</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the home page</td>
                        </tr>
                        <tr>
                            <td><kbd>g</kbd> then <kbd>j</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the jobs page</td>
                        </tr>
                        <tr>
                            <td><kbd>g</kbd> then <kbd>b</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the builds page</td>
                        </tr>
                        <tr>
                            <td><kbd>g</kbd> then <kbd>t</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the tests page</td>
                        </tr>
                        <tr>
                            <td><kbd>g</kbd> then <kbd>s</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the SoCs page</td>
                        </tr>
                        <tr>
                            <td><kbd>g</kbd> then <kbd>i</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Go to the information page</td>
                        </tr>
                    </table>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <h4>Actions</h4>
                    <table id="hotkeys-actions-table">
                        <tr>
                            <td><kbd>s</kbd> then <kbd>h</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Show this help</td>
                        </tr>
                        <tr>
                            <td><kbd>/</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Select the search field</td>
                        </tr>
                        <tr>
                            <td><kbd>l</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Select the table length menu</td>
                        </tr>
                        <tr>
                            <td><kbd>Esc</kbd></td>
                            <td>&nbsp;:&nbsp;</td>
                            <td>Close dialogs, remove focus</td>
                        </tr>
                    </table>
                </div>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
